import { defineComponent, ref, watch } from 'vue'
import EditorBlock from '../EditorBlock'
import { jsonData } from '@/config/editor.config'
import useMouseEvent from '../utils/useMouseEvent'
import useData from '../utils/useData'
import useLine from '../utils/useLine'
export default defineComponent({
  props: { loadJson: Object },
  setup(props) {
    // 监听jsonData，如果有新的数据加入，则更新data中的数据
    watch(
      () => props.loadJson,
      (newVal) => {
        jsonData.value.container = newVal?.container
        jsonData.value.blocks = newVal?.blocks
      },
      {
        deep: true,
        immediate: true
      }
    )
    // 当前选中的元素下标
    const chooseIdx = ref(-1)
    const line = ref({ x: 0, y: 0 })
    function setStyle(p: { x: number; y: number }, idx: number) {
      jsonData.value.blocks[idx].style.width = p.x
      jsonData.value.blocks[idx].style.height = p.y
    }

    // 鼠标按下
    function down(e: any, idx: number) {
      mouseDown(e, idx)
      chooseIdx.value = idx
    }
    // 鼠标抬起
    function up(e: any) {
      mouseup(e)
      chooseIdx.value = -1
      line.value.x = 0
      line.value.y = 0
    }
    // 辅助线
    const { computedLinesPosition } = useLine(jsonData, chooseIdx, line)
    // 数据操作
    const { exportJson, load } = useData(jsonData)
    // 鼠标操作
    const { choose, mouseDown, mouseup, clearChoose } = useMouseEvent(
      jsonData,
      computedLinesPosition
    )
    return () => (
      <div class="flex-1 border flex flex-col">
        {/* 操作台 */}
        <div class="flex justify-center my-3">
          <el-button onClick={exportJson}> 导出</el-button>
          <el-button onClick={load}> 导入</el-button>
        </div>
        <div class="flex justify-center items-center">
          <div
            class="canvas-container border relative overflow-hidden"
            style={jsonData.value.container}
            onClick={clearChoose}
          >
            {jsonData.value.blocks.map((block: any, idx: number) => {
              return (
                <EditorBlock
                  onSetStyle={(x, y) => setStyle({ x, y }, idx)}
                  onClick={(e: MouseEvent) => choose(e, idx)}
                  onMousedown={(e: MouseEvent) => down(e, idx)}
                  onMouseup={(e: MouseEvent) => up(e)}
                  class={block.focus ? 'is-choose' : ''}
                  key={block.key + idx}
                  block={block}
                ></EditorBlock>
              )
            })}
            {/* x轴辅助线 */}
            {console.log(line.value)}
            {line.value.y ? (
              <div
                class="w-full h-0 border border-red-500 border-dashed absolute pointer-events-none"
                style={{ top: line.value.y + 'px' }}
              ></div>
            ) : (
              ''
            )}
            {/* y轴辅助线 */}
            {line.value.x ? (
              <div
                class="w-0 h-full border border-red-500 border-dashed absolute pointer-events-none"
                style={{ left: line.value.x + 'px' }}
              ></div>
            ) : (
              ''
            )}
          </div>
        </div>
      </div>
    )
  }
})
